<template>
  <div class="cust-check-repeat">
    <!-- 查重字段设置区域 -->
    <section class="setting-section">
      <h3>| 查重字段设置</h3>
      <div class="field-group">
        <el-checkbox v-model="checkedFields.nameFlag" class="inline-checkbox">【客户基础信息】客户名称</el-checkbox>
        <el-checkbox v-model="checkedFields.countryFlag" class="inline-checkbox">【客户基础信息】国家地区</el-checkbox>
      </div>

      <div class="field-group">
        <el-checkbox v-model="checkedFields.customerTypeFlag" class="inline-checkbox">【客户基础信息】客户类型</el-checkbox>
        <el-checkbox v-model="checkedFields.emailFlag" class="inline-checkbox">【客户基础信息】电子邮箱</el-checkbox>
      </div>

      <div class="field-group">
        <el-checkbox v-model="checkedFields.mailingAddressFlag" class="inline-checkbox">【客户基础信息】邮寄地址</el-checkbox>
        <el-checkbox v-model="checkedFields.contactsFlag" class="inline-checkbox">【客户联系人】联系人</el-checkbox>
      </div>
    </section>

    <!-- 查重说明区域 -->
    <section class="instruction-section">
      <h3>| 客户查重说明</h3>
      <ol>
        <li>当新增客户保存时，系统自动进行查重操作</li>
        <li>现有"查重字段内容"等于或包含新录入内容判定为重复</li>
        <li>判定重复后，提示：该客户信息与系统现有客户有重复</li>
      </ol>
    </section>

    <!-- 保存按钮 -->
    <el-button type="primary" @click="saveSettings">保存</el-button>
  </div>
</template>

<script>
import { BaseCheckRepeatApi } from '@/api/customermanager/basecheckrepeat/index'
import { ElMessage } from 'element-plus'

export default {
  name: 'CustCheckRepeat',
  data() {
    return {
      checkedFields: {
        nameFlag: false,
        countryFlag: false,
        customerTypeFlag: false,
        emailFlag: false,
        mailingAddressFlag: false,
        contactsFlag: false,
      }
    }
  },
  mounted() {
    this.fetchSettings();
  },
  methods: {
    async fetchSettings() {
      // try {
      //   const res = await BaseCheckRepeatApi.getSettings();
      //   const backendData = res || {};
      //   const convertedFields = {};

      //   Object.keys(this.checkedFields).forEach(key => {
      //     convertedFields[key] = backendData[key] === "1";
      //   });

      //   this.checkedFields = convertedFields;
      // } catch (error) {
      //   ElMessage.error('加载失败：' + error.message);
      // }
    },

    async saveSettings() {
      if (!this.validateForm()) return;

      const transformedFields = {};
      Object.keys(this.checkedFields).forEach(key => {
        transformedFields[key] = this.checkedFields[key] ? "1" : "0";
      });

      try {
        const res = await BaseCheckRepeatApi.deleteAndInsertBaseCheckRepeat(transformedFields);

        if (res === true) {
          ElMessage.success('保存成功！');
        } else {
          ElMessage.error('保存失败，返回为 false');
        }
      } catch (error) {
        ElMessage.error('保存失败：' + (error?.message || '未知错误'));
      }
    },

    validateForm() {
      const selected = Object.values(this.checkedFields).filter(v => v);
      if (selected.length === 0) {
        ElMessage.error('请至少选择一个查重字段');
        return false;
      }
      return true;
    }
  }
}
</script>

<style scoped>
.cust-check-repeat {
  max-width: 600px;
  margin: 0;
  padding: 20px;
  text-align: left;
  font-family: 'Microsoft YaHei', sans-serif;
}

.setting-section, .instruction-section {
  margin-bottom: 30px;
}

.setting-section h3, .instruction-section h3 {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  font-weight: normal;
}

.field-group {
  margin-bottom: 15px;
}

.field-group .el-checkbox {
  display: block;
  margin-bottom: 10px;
}

.instruction-section ol {
  padding-left: 20px;
  color: #666;
  line-height: 1.6;
}

.instruction-section li {
  margin-bottom: 10px;
}

.el-button {
  width: 120px;
  height: 40px;
}

.field-group .inline-checkbox {
  display: inline-block;
  margin-right: 20px;
}
</style>
